<template>
  <div class="container">
    <div class="page-header">
      <span class="title-item">入库信息</span>
      <a-button type="primary" style="position: absolute; right: 100px" @click="goToRuku">返回列表
      </a-button>
    </div>
    <template>
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="1" tab="设备信息">
          <div class="page-body">
            <div class="page-body">
              <a-form-model layout="horizontal" :model="form" :colon="false" ref="ruleForm" :rules="ruleForm">
                <a-row type="flex">
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="物资名称" :colon="false" prop="spareName">
                      <a-input v-model="form.spareName" class="inline-input" placeholder autocomplete="off"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="物资型号" :colon="false" prop="spareVersion">
                      <a-input class="inline-input" v-model="form.spareVersion" placeholder autocomplete="off">
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="物资分类" labelAlign="right" :colon="false" prop="typeId">
                      <a-select class="fuze-management" default-value allow-clear v-model="form.typeId">
                        <a-select-option :value="item.id" v-for="(item, index) in typeId" :key="index">
                          {{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type="flex">
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="批次" labelAlign="right" :colon="false" prop="batchNumber">
                      <a-select class="fuze-management" default-value allow-clear v-model="form.batchNumber">
                        <a-select-option :value="item.id" v-for="(item, index) in batchNumber" :key="index">
                          {{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-model-item>
<!--                    <a-form-model-item class="form-item" label="批次号" :colon="false" prop="batchNumber">-->
<!--                      <a-input v-model="form.batchNumber" class="inline-input" placeholder autocomplete="off"></a-input>-->
<!--                    </a-form-model-item>-->
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="计量单位" :colon="false" prop="jlunit">
                      <a-input v-model="form.jlunit" class="inline-input" placeholder autocomplete="off"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-model-item class="form-item" label="数量" :colon="false" prop="number">
                      <a-input v-model="form.number" class="inline-input" placeholder autocomplete="off"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>

    <a-row>
      <a-col class="submit-box">
        <a-button type="primary" class="select-btn" @click="getAdd()">确认入库</a-button>
        <a-button type="reset" class="select-to" @click="() => (form = {})">重新填写</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import moment from "moment";
  import "moment/locale/zh-cn";
  import {
    log
  } from "video.js";
  export default {
    name: "index",
    data() {
      return {
        form: {
          userid: "",
          jlunit: "", //计量单位
          spareName: "", //设备名称
          spareVersion: "",
          typeId: "", //类型id
          batchNumber: "", //批次号
          number: "", //数量
          areaId: " ", //物资归属大区
        },
        ruleForm: {
          spareVersion: [{
            required: true,
            message: "设备型号必填",
            trigger: "blur",
          }, ],
          spareName: [{
            required: true,
            message: "设备名称必填",
            trigger: "blur",
          }, ],
          typeId: [{
            required: true,
            message: "物资分类必填",
            trigger: "blur",
          }, ],
          jlunit: [{
            required: true,
            message: "计量单位必填",
            trigger: "blur",
          }, ],
          number: [{
            required: true,
            message: "数量必填",
            trigger: "blur",
          }, ],
          batchNumber: [{
            required: true,
            message: "批次号必填",
            trigger: "blur",
          }, ],
        },
        moment,
        typeId: [], //
        batchNumber: [], //批次
        key: "1", //页签
        forms: this.$form.createForm(this),
      };
    },
    mounted() {
      this.form.userid = this.$user.id;
      this.form.areaId = this.$user.deptId;
      this.getTypeId();
      this.getBatchId();
    },
    methods: {
      goToRuku() {
        this.$router.push({
          path: "rkManage",
        });
      },
      onTouruChange(e) {
        console.log(e);
      },
      //页签切换回调
      callback(key) {
        // console.log(key);
        this.key = key;
      },
      //转换13位时间戳
      onChange(date, dateString) {
        console.log(date, dateString);
        this.form.productionDate = moment(dateString).valueOf();
        console.log(this.form.productionDate);
      },
      //物资入库
      getAdd() {
        //判断
        if (this.key == 1) {
          console.log("单独入库");
          //单独入库
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              // return;
              let data = {
                name: this.form.spareName, //名称
                version: this.form.spareVersion, //型号
                unit: this.form.jlunit, //单位
                typeId: this.form.typeId, //类型id
                number: this.form.number, //数量
                batchNumber: this.form.batchNumber, //批次号
                areaId: this.form.areaId, //地区id
                userId: this.form.userid, //用户名id
              };
              this.$api.saveGoods(data).then((res) => {
                if (res.data.code == 0) {
                  this.$message.success("入库成功");
                  this.form = {
                    userid: "",
                    jlunit: "", //计量单位
                    spareName: "", //设备名称
                    spareVersion: "",
                    typeId: "", //类型id
                    batchNumber: "", //批次号
                    number: "", //数量
                    areaId: " ", //物资归属大区
                  };
                } else {
                  this.$message.error(res.data.errorMessage);
                }
              });
            }
          });
        }
      },
      //获取类型id
      getTypeId() {
        this.$api.getinitGoods().then((res) => {
          if (res.data.code == 0) {
            this.typeId = res.data.data;
            this.form.typeId = res.data.data[0].id;
          }
        });
      },
      getBatchId() {
        this.$api.getInitProcurementBatch().then((res) => {
          if (res.data.code == 0) {
            this.batchNumber = res.data.data
            this.form.batchNumber = res.data.data[0].id
          }
        })
      },
    },
  };
</script>


<style scoped lang="scss">
  ::v-deep .anticon svg {
    color: #bebebe;
  }

  ::v-deep .ant-upload-list-item-name {
    color: #bebebe;
  }

  ::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
    background-color: #2c6a5f;
  }

  .title-item {
    font-size: 24px;
    color: #37ddc0;
    width: 100%;
  }

  .select-btn {
    background-color: #2c6a5f;
    border: none;
    margin-top: 5px;
    margin-right: 15px;
  }

  ::v-deep .ant-col .ant-form-item-control-wrapper {
    width: 80%;
  }

  ::v-deep .ant-col .ant-form-item-label {
    width: 110px;
  }

  .ant-tabs {
    width: 97.9%;
    margin-top: 20px;
    margin-left: 1px;
  }

  ::v-deep .ant-tabs-nav {
    margin-left: 20px;
  }

  // ::v-deep .ant-tabs.ant-tabs-card  .ant-tabs-tab-active{
  //   color: #9fb043;
  // }
  ::v-deep .ant-tabs-bar {
    border-bottom: 1px solid #3cbda6;
  }

  ::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    background: #2c6a5f;
    border: 1px solid #3cbda6;
  }

  ::v-deep .ant-col .ant-form-item-control-wrapper {
    width: 80%;
  }

  ::v-deep .select-to {
    border: 1px solid #bebebe;
    color: #bebebe;
    background: #2b4341;
  }

  ::v-deep .page-header {
    margin-left: 25px;
    margin-top: 30px;
  }

  ::v-deep .ant-form-item {
    display: flex;
  }

  ::v-deep .submit-box {
    float: right;
    margin-right: 210px;
  }

  ::v-deep .ant-form-item-control-wrapper {
    width: 100%;
  }

  .page-body {
    margin-top: 70px;
  }

  ::v-deep .ant-tabs-tab {
    color: #bebebe;
  }

  ::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    color: #9fb043;
  }

  ::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
    color: #9fb043;
  }
</style>